<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>依赖注入</title>
</head>

<body>
  <div id="app">
    <button @click="count++">加1</button> {{ count }}
    <my-parent></my-parent>
  </div>
</body>

<script src="./js/vue.global.js"></script>
<script>

// 子组件
  const Child = {
    template: `
      <div>
         我是子组件 - {{ myMessage }} - {{ count }}
      </div>
    `,
    inject: {
      myMessage: { // 替换本地名字，
        from: 'message'
      },
      count: {
        default: 100
      }
    }
  }

  // 父组件
  const Parent = {
    template: `
      <div>
        我是父组件 - {{ message }}
        <my-child></my-child>
      </div>
    `,
    inject: ['message'],
    components: {
      MyChild: Child
    }
  }

  const { createApp } = Vue

  const app = createApp({
    components: {
      MyParent: Parent
    },
    data() {
      return {
        message: '传家宝',
        count: 1
      }
    },
    provide() {
      return {
        message: this.message,
        count: this.count
      }
    }
  })

  app.mount('#app')

</script>

</html>